<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script type="text/javascript" src="js/d3.v2.js"></script>
		<script type="text/javascript" src="js/voirstat.js"></script>
        <title> </title>

<script id="csv" type="text/csv">
NomEudiant,Exercice,Noten , Note Pondérée 
// Remplir ici toute les données récupérée a partir de GetNote  et non pas manuellement , j'ai fait pour afficher 
Amine,33.9,80.7,3854.085,America
US,308.3,78.2,3784.191,America
Germany,82.3,79.4,137.847,Europe
Russia,141.9,65.5,6601.668,Europe
Mexico,108.4,76.06,758.449,America
Brazil,193.3,71.99,3287.612,America
Spain,46.9,80.9,195.365,Europe
France,65.4,80.98,244.339,Europe
China,1339,73,3705.407,Asia
Australia,22.4,81.2,2969.907,Australia
UK,62,79.4,93.800,Europe
Italy,60.3,80.5,116.346,Europe
India,1184,64.7,1236.085,Asia
Japan,127.4,82.6,145.920,Asia
Iceland,0.3,81.8,40.000,Europe
Portugal,10.6,78.1,35.560,Europe
South Africa,50,49.3,471.445,Africa
Egypt,78.9,71.3,387.000,Africa
Sweden,9.3,80.9,170.410,Europe</script>
    <script>renderChart();</script>

	
	
<script type="text/javascript">

		//tableau des etudiant / notes / exercice
		var arrnote = {0:"nulle", 5:"mediocre", 10:"passable", 15:"bien", 20:"excellent"};

		//enregistrement de la note d'un etudiant
		function savenote(note,exercice, nom) {
			//récupère les informations de l'étudiant
			var nom = $("#nom_"+nom_).text();
			var n = arrnote[note];
			var url = $("#etu_tof_"+etu).attr("src");
			var p = {"note":n, "nom":nom, "url":exercice};
		
			$.post("public/evaletu/ecrire", p,
					 function(data){
						dataCloud = data;
					 }, "json");
		}
		
		
			//récupération des notes d'un étudiant
		function getNote(etu) {
			//récupère les informations de l'étudiant
			var nom = $("#etu_nom_"+nom).text();
			var p = {"etu":nom};
			$.get("lire.php", p,
					 function(data){
						dessineGraph(data, etu);
					 }, "json");
		}

		// dessine le graphe selon  voirstat.js
		function dessineGraph(data, nom){ 
		  
		  var valueLabelWidth = 40; // space reserved for value labels (right)
var barHeight = 20; // height of one bar
var barLabelWidth = 100; // space reserved for bar labels
var barLabelPadding = 5; // padding between bar and bar labels (left)
var gridLabelHeight = 18; // space reserved for gridline labels
var gridChartOffset = 3; // space between start of grid and first bar
var maxBarWidth = 420; // width of the bar with the max value
 
// accessor functions 
var barLabel = function(d) { return d['Continent']; };  //  changer en nom étudiant
var barValue = function(d) { return parseFloat(d['Population (mill)']); };  //  changer en moyenne pondérée
 
// scales
var yScale = d3.scale.ordinal().domain(d3.range(0, data.length)).rangeBands([0, data.length * barHeight]);
var y = function(d, i) { return yScale(i); };
var yText = function(d, i) { return y(d, i) + yScale.rangeBand() / 2; };
var x = d3.scale.linear().domain([0, d3.max(data, barValue)]).range([0, maxBarWidth]);
// svg container element
var chart = d3.select('#chart').append("svg")
  .attr('width', maxBarWidth + barLabelWidth + valueLabelWidth)
  .attr('height', gridLabelHeight + gridChartOffset + data.length * barHeight);
// grid line labels
var gridContainer = chart.append('g')
  .attr('transform', 'translate(' + barLabelWidth + ',' + gridLabelHeight + ')'); 
gridContainer.selectAll("text").data(x.ticks(10)).enter().append("text")
  .attr("x", x)
  .attr("dy", -3)
  .attr("text-anchor", "middle")
  .text(String);
// vertical grid lines
gridContainer.selectAll("line").data(x.ticks(10)).enter().append("line")
  .attr("x1", x)
  .attr("x2", x)
  .attr("y1", 0)
  .attr("y2", yScale.rangeExtent()[1] + gridChartOffset)
  .style("stroke", "#ccc");
// bar labels
var labelsContainer = chart.append('g')
  .attr('transform', 'translate(' + (barLabelWidth - barLabelPadding) + ',' + (gridLabelHeight + gridChartOffset) + ')'); 
labelsContainer.selectAll('text').data(data).enter().append('text')
  .attr('y', yText)
  .attr('stroke', 'none')
  .attr('fill', 'black')
  .attr("dy", ".35em") // vertical-align: middle
  .attr('text-anchor', 'end')
  .text(barLabel);
// bars
var barsContainer = chart.append('g')
  .attr('transform', 'translate(' + barLabelWidth + ',' + (gridLabelHeight + gridChartOffset) + ')'); 
barsContainer.selectAll("rect").data(data).enter().append("rect")
  .attr('y', y)
  .attr('height', yScale.rangeBand())
  .attr('width', function(d) { return x(barValue(d)); })
  .attr('stroke', 'white')
  .attr('fill', 'steelblue');
// bar value labels
barsContainer.selectAll("text").data(data).enter().append("text")
  .attr("x", function(d) { return x(barValue(d)); })
  .attr("y", yText)
  .attr("dx", 3) // padding-left
  .attr("dy", ".35em") // vertical-align: middle
  .attr("text-anchor", "start") // text-align: right
  .attr("fill", "black")
  .attr("stroke", "none")
  .text(function(d) { return d3.round(barValue(d), 2); });
// start line
barsContainer.append("line")
  .attr("y1", -gridChartOffset)
  .attr("y2", yScale.rangeExtent()[1] + gridChartOffset)
  .style("stroke", "#000");
  

		}
		
		
</script>
		
    </head>
	
	
	<style>
		.btn {
			cursor:pointer; 
		}
		.tof {
			width:200px; 
		}
		.good {
			color:green;
		}
		.bad {
			color:red;
		}
		
		div.conteneur { 
		  	text-align:left; /* centrage horizontal */
		  	clear:both;
			border-style:solid;
			border-width:2px;	
		}
		
		div.bloc {
			float:left;
			margin:3px 3px 3px 3px; 	 
		}

		.axis {
		  shape-rendering: crispEdges;
		}
		
		.x.axis line {
		  stroke: #fff;
		}
		
		.x.axis .minor {
		  stroke-opacity: .5;
		}
		
		.x.axis path {
		  display: none;
		}
		
		.y.axis line, .y.axis path {
		  fill: none;
		  stroke: #000;
		}
				
		</style>
    <body>
	
	
	<MARQUEE BEHAVIOR=alternate LOOP=-1  BGCOLOR="white" ScrollAmount="2" ScrollDelay="3" Width="100%" >
		<strong>Systeme de notation de Etudiants </strong>
	</MARQUEE> 
	
	
        <?php
        
		$i=0;
		$xml = simplexml_load_file("http://picasaweb.google.com/data/feed/base/user/113848708930851956597/albumid/5795380358275112865?alt=rss&kind=photo&hl=fr");
		
		if($i % 2 == 0) $c = 'good'; else $c = 'bad'; 
	     foreach ($xml->channel->item as $item){
		 
				
		echo "<div id='etu_".$i."' class='conteneur' >";
		
		//  forumulaire propre a chaque etudiant :
	
	   //  fin form
	   echo "<div class='bloc' >";
		echo "<img id='etu_tof_".$i."' src='".$item->enclosure['url']."' class='tof' onclick='getNote()' />";
		echo "<div class='$c' id='etu_nom_".$i."'>".$item->title."</div>";
		echo "</div>";
	   
		echo "<div class='bloc' >";
	   echo "<form id='note'> ";
	   
	   echo "<strong>exercice N° :</strong> ";
	   echo "<input name='exercice' type='text' id='exercice' /> </br> ";
	   echo "<strong> Note :</strong>";
	   echo "<input name='note'     type='text' id='note'     /> ";
	   echo "<input type ='submit' name ='submit' value ='valider'  onclick='savenote(1,".$i.",0)'   />    ";
	   echo " </br> ";
	   	echo "<input type ='submit' name ='submit' value ='Afficher Notes '  onclick='dessinegraph()'   />    ";
	   // echo "<input type ='submit' name ='submit' value ='valider'  onclick='savenote(1,".$i.",".$j.")'   />    ";
	   echo "</form> ";
	   echo "</div>";
	
	
	
	
		echo "<div id='etu_svg_".$i."' class='bloc' >   </div>";
		echo "</div>";
		
		$i++;
	
		
		
		
	   }
		
		
        ?>
		
		
		
		
		
    </body>
</html>
